<template>
  <div class="container" ref="mainCon">
    <topTitle
      :titleText="titleText"
      :back="true"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <el-form
        :model="formData"
        class="rosterForm"
        :rules="rules"
        ref="ruleForm"
        label-width="164px"
      >
        <el-form-item label="人员姓名：" prop="name">
          <el-input
            v-model="formData.name"
            clearable
            class="sWidth"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号：" prop="idcard">
          <el-input
            v-model="formData.idcard"
            clearable
            type="text"
            class="sWidth"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item prop="sex" label="人员性别：">
          <el-select
            class="sWidth"
            clearable
            v-model="formData.sex"
            placeholder="请选择"
          >
            <el-option
              v-for="item in sexOption"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期：" prop="birthday">
          <el-date-picker
            clearable
            class="sWidth"
            v-model="formData.birthday"
            type="date"
            placeholder="选择出生日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="民族：" prop="nationality">
          <el-select
            class="sWidth"
            filterable
            clearable
            v-model="formData.nationality"
            placeholder="请选择"
          >
            <el-option
              v-for="item in nationOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="家庭住址：" prop="address">
          <el-input
            v-model="formData.address"
            rows="5"
            clearable
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传修改身份证照片：" prop="idcardPhoto">
          <uploadAnnex
            @getFileList="getFileListPay"
            :limitationFactor="limitationFactorPay"
            @getFile="getFilePay"
            :upLoadFile="idcardPhoto"
          />
        </el-form-item>
        <el-row v-model="formData.contractImgUrl">
          <uploadResult
            style="margin-left: 166px"
            :resultList="idcardPhoto"
            @callBackResult="getFilePay"
          />
        </el-row>
        <el-form-item style="padding-top: 18px">
          <el-button
            type="primary"
            class="commonBut saveBtn"
            @click="submitFirst"
            >保存</el-button
          >
          <el-button class="commonBut" @click="goBack">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="addDialog"
      @close="closeDialog('formData')"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      width="600px"
      class="tipsDia"
    >
      <h2>
        对数据信息修改后，该人员基础数据会进行变更，请确认修改的数据是否正确？
      </h2>
      <p>
        <i class="icon iconfont iconhuabanfuben"></i>
        注：请要求修改者提供人员身份证照片，修改前核验身份信息的正确性
      </p>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="closeDialog('formData')" class="cancel"
          >否</el-button
        >
        <el-button
          type="primary"
          @click.native="submitRecords('formData')"
          v-sdc
          :loading="isSaveLoading"
          class="save"
          >是</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="showIds"
      @close="closeDialogID('formData')"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      width="650px"
      class="tipsDia"
    >
      <h2>修改的身份证号码，系统中已经存在，请提交运维工单进行人工修改！</h2>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click.native="closeDialogID('formData')"
          class="save"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'rosterEdit',
  data() {
    //缴纳凭证验证
    var checkPayUploadFile = (rule, value, callback) => {
      if (this.idcardPhoto.length === 0) {
        return callback(new Error('修改身份证照片不能为空'))
      } else {
        callback()
      }
    }
    return {
      titleText: '花名册修改',
      id: '',
      formData: {
        name: '',
        idCard: '',
        sex: '',
        birthday: '',
        nationality: '',
        address: '',
        idcardPhoto: [],
      },
      idcardPhoto: [],
      rules: {
        name: [{ required: true, message: '请输入人员姓名', trigger: 'blur' }],
        idcard: [
          {
            required: true,
            pattern:
              /^(([1-9][0-9]{5}(19|20)[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}([0-9]|X|x))|([1-9][0-9]{5}[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}))$/,
            message: '请输入正确的身份证号',
            trigger: 'blur',
          },
        ],
        sex: [{ required: true, message: '请选择人员性别', trigger: 'change' }],
        birthday: [
          { required: true, message: '请选择出生日期', trigger: 'change' },
        ],
        nationality: [
          { required: true, message: '请选择人员民族', trigger: 'change' },
        ],
        address: [
          { required: true, message: '请输入家庭住址', trigger: 'blur' },
        ],
        idcardPhoto: [
          {
            required: true,
            validator: checkPayUploadFile,
            trigger: 'change',
          },
        ],
      },
      sexOption: [],
      nationOptions: [],
      limitationFactorPay: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 1, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: 'salaryExcel1', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm1', //自定义id解决一个页面包含多个上传附件
        messagetip: '要求格式为png，jpg，jpeg格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '请上身份证人像面照片，附件格式支持png，jpg，jpeg，最多上传1个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      addDialog: false,
      showIds: false,
    }
  },

  mounted() {
    this.id = this.$route.query.id
    this.getSelectData('SEX')
    this.getSelectData('NATION')
    this.getEmpInfo(this.$route.query.id)
  },
  methods: {
    goBack() {
      this.$router.push({
        path: '/home/systemSettings/rosterChange',
        name: 'rosterChange',
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/systemSettings/rosterChange',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getEmpInfo(employeeId) {
      this.axios
        .post('api-e/cs/build/expand/detail', { employeeId })
        .then((res) => {
          if (!res.data.hasError) {
            const {
              name,
              address,
              birthday,
              idcard,
              idCardPhotos,
              nationality,
              sex,
            } = res.data.result
            this.formData = {
              name,
              address,
              birthday,
              idcard,
              nationality,
              sex,
            }
            this.idcardPhoto = idCardPhotos
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'warning',
            })
          }
        })
    },
    getSelectData(dicitemType) {
      this.axios({
        method: 'post',
        url: 'api-bs/base/dicitem/typeorname',
        data: {
          dicitemType: dicitemType,
        },
      }).then((response) => {
        if (dicitemType == 'SEX') {
          this.sexOption = response.data.result
        } else if (dicitemType == 'NATION') {
          this.nationOptions = response.data.result
        }
      })
    },
    getFilePay(val) {
      console.log(val)
      this.idcardPhoto = val
    },
    getFileListPay(val) {
      console.log(val)
    },
    closeDialog(ele) {
      this.addDialog = false
    },
    //检查提交的身份证号码是否重复
    checkIdCards() {
      let params = {
        id: this.id,
        idcard: this.formData.idcard,
      }

      this.axios
        .post('api-e/cs/build/expand/check/idCard', params)
        .then((res) => {
          if (!res.data.hasError) {
            this.addDialog = true
          } else {
            if (
              res.data.errorMsg ==
              '修改的身份证号码，系统中已经存在，请提交运维工单进行人工修改！'
            ) {
              this.showIds = true
            } else {
              this.$message({
                type: 'warning',
                message: res.data.errorMsg,
              })
            }
          }
        })
    },
    closeDialogID(ele) {
      this.showIds = false
    },
    submitFirst() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.checkIdCards()
        } else {
          return false
        }
      })
    },
    submitRecords() {
      let params = this.formData
      if (this.idcardPhoto.length) {
        this.idcardPhoto.forEach((item) => {
          item.remark = 'IDCARD_READER'
        })
      }
      params.idcardPhoto = JSON.stringify(this.idcardPhoto)
      params.id = this.id
      this.axios.post('api-e/cs/build/expand/edit', params).then((res) => {
        if (!res.data.hasError) {
          this.$message({
            type: 'success',
            message: '操作成功',
          })
          this.goBack()
        } else {
          this.$message({
            type: 'warning',
            message: res.data.errorMsg,
          })
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.mainCon {
  padding: 40px 80px 40px 20px;
}
.tipsDia {
  h2 {
    font-size: 18px;
    line-height: 28px;
  }
  p {
    margin-top: 24px;
    .iconhuabanfuben:before {
      font-size: 18px;
      color: #f6a548;
      vertical-align: bottom;
    }
  }
}
</style>
